/* Shared components (one place for what several pages use). Loaded after tokens/icons, before the page files.
   Rule: a piece used by two or more pages lives HERE; page files only place it. See project-notes/DESIGN-DIRECTION.md. */

/* ===== WooCommerce notices (added to cart, errors, info): the site's own card instead of the default olive bar ===== */
.woocommerce-notices-wrapper{width:100%}
.woocommerce-message,.woocommerce-info,.woocommerce-error{position:relative;display:flex!important;align-items:center;flex-wrap:wrap;gap:8px 16px;box-sizing:border-box;width:min(1200px,calc(100% - 32px));margin:16px auto!important;padding:14px 20px!important;border:1px solid var(--c-line)!important;border-radius:12px;background:linear-gradient(135deg,var(--c-tint-purple),var(--c-tint-pink))!important;box-shadow:none!important;color:var(--c-ink)!important;font-size:15px;font-weight:500;line-height:1.7;list-style:none;text-align:start}
.woocommerce-error{padding-inline:20px!important}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{content:""!important;position:static!important;display:block;flex:none;width:22px;height:22px;margin:0!important;background:var(--c-primary);font-family:inherit;-webkit-mask:var(--ico-notice-ok) center/contain no-repeat;mask:var(--ico-notice-ok) center/contain no-repeat}
.woocommerce-info::before{-webkit-mask-image:var(--ico-notice-info);mask-image:var(--ico-notice-info)}
.woocommerce-error::before{-webkit-mask-image:var(--ico-notice-err);mask-image:var(--ico-notice-err)}
.woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{order:3;display:inline-flex;align-items:center;justify-content:center;float:none!important;min-height:40px;margin:0 0 0 0!important;margin-inline-start:auto!important;padding:0 20px!important;border:0!important;border-radius:8px!important;background:var(--grad-brand)!important;background-origin:border-box;color:var(--c-white)!important;font-size:15px;font-weight:700;text-decoration:none}
.woocommerce-message .button:hover,.woocommerce-info .button:hover,.woocommerce-error .button:hover{filter:brightness(.93);color:var(--c-white)!important}
.woocommerce-error li{margin:0;padding:0;list-style:none}
:root{--ico-notice-ok:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M8%2012.5l3%203%205-6%22%2F%3E%3C%2Fsvg%3E");--ico-notice-info:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2011v6M12%207.5v.01%22%2F%3E%3C%2Fsvg%3E");--ico-notice-err:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M15%209l-6%206M9%209l6%206%22%2F%3E%3C%2Fsvg%3E")}
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-message:focus,.woocommerce-info:focus,.woocommerce-error:focus,.woocommerce-message:focus-visible{outline:0!important}
.woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{line-height:1.2!important;height:40px;box-sizing:border-box}
@media(max-width:767px){.woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{order:3;width:100%;margin-inline-start:0!important}}
.woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{display:inline-flex!important;align-items:center;justify-content:center}
/* phone: the notice's tick sits on its top border and the words use the full width */
@media(max-width:767px){
  .woocommerce-message,.woocommerce-info,.woocommerce-error{padding:22px 16px 16px!important;margin-top:24px!important}
  .woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{position:absolute!important;top:-14px;inset-inline-start:50%;width:28px;height:28px;margin:0!important;transform:translateX(50%);border:2px solid var(--c-white);border-radius:50%;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207%22%2F%3E%3C%2Fsvg%3E") center/16px no-repeat,var(--grad-brand);-webkit-mask:none;mask:none}
  .woocommerce-message>*:not(.button),.woocommerce-info>*:not(.button){flex:1 1 100%}
}

/* Stars drawn with images, not the WooCommerce icon font: no "SSSSS" flash while that font loads */
.star-rating{position:relative!important;display:inline-block!important;width:5.5em!important;height:1em!important;overflow:hidden!important;font-size:14px!important;line-height:1!important;font-family:inherit!important;text-indent:0;float:none!important;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2022%2020%22%3E%3Cpath%20fill%3D%22%23E4DCE6%22%20d%3D%22M10%201l2.6%205.6%206%20.7-4.5%204.1%201.2%206L10%2014.4%204.7%2017.4l1.2-6L1.4%207.3l6-.7z%22%2F%3E%3C%2Fsvg%3E") right center/15.4px 14px repeat-x!important}
.star-rating::before{content:none!important;display:none!important}
.star-rating>span{position:absolute!important;top:0;right:0;left:auto!important;display:block!important;height:100%!important;overflow:hidden!important;font-size:0!important;color:transparent!important;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2022%2020%22%3E%3Cpath%20fill%3D%22%23F5A524%22%20d%3D%22M10%201l2.6%205.6%206%20.7-4.5%204.1%201.2%206L10%2014.4%204.7%2017.4l1.2-6L1.4%207.3l6-.7z%22%2F%3E%3C%2Fsvg%3E") right center/15.4px 14px repeat-x!important}
.star-rating>span::before,.star-rating>span::after{content:none!important;display:none!important}
.star-rating>span *{font-size:0!important}

/* ===== ONE delete-button look for every removable product row anywhere (cart drawer, mini cart, cart page, quick view):
   pink circle, red trash icon (the owner's reference). Hover = brand colours only. ===== */
:root{--ico-trash:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18M8%206V4a1%201%200%200%201%201-1h6a1%201%200%200%201%201%201v2M19%206l-1%2014a2%202%200%200%201-2%202H8a2%202%200%200%201-2-2L5%206M10%2011v6M14%2011v6%22%2F%3E%3C%2Fsvg%3E")}
.elementor-menu-cart__products .elementor-menu-cart__product-remove,.woocommerce a.remove,.woocommerce-mini-cart a.remove,.widget_shopping_cart a.remove,.woocommerce-cart-form a.remove{position:absolute;top:12px;inset-inline-end:0;width:32px;height:32px;margin:0;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:var(--c-tint-pink)!important;color:transparent!important;font-size:0!important;line-height:0;text-decoration:none;transition:background .2s}
.elementor-menu-cart__products .elementor-menu-cart__product-remove a{position:absolute;inset:0;display:block;font-size:0;color:transparent}
.elementor-menu-cart__products .elementor-menu-cart__product-remove::before,.woocommerce a.remove::before,.woocommerce-mini-cart a.remove::before,.widget_shopping_cart a.remove::before,.woocommerce-cart-form a.remove::before{content:"";display:block;position:absolute;inset:0;width:16px;height:16px;margin:auto;transform:none;border-radius:0;background:var(--c-pink-bright);-webkit-mask:var(--ico-trash) center/contain no-repeat;mask:var(--ico-trash) center/contain no-repeat}
.elementor-menu-cart__products .elementor-menu-cart__product-remove::after{content:none!important}
.elementor-menu-cart__products .elementor-menu-cart__product-remove:hover,.woocommerce a.remove:hover,.widget_shopping_cart a.remove:hover{background:var(--c-pink-bright)!important}
.elementor-menu-cart__products .elementor-menu-cart__product-remove:hover::before,.woocommerce a.remove:hover::before,.widget_shopping_cart a.remove:hover::before{background:var(--c-white)}

/* ===== quantity stepper [ - 1 + ]: shop cards, product page, quick view, cart page (sizes per context in each page file) ===== */
.safy-qty{display:inline-flex;align-items:stretch;flex:none;border:1px solid var(--c-line);border-radius:8px;overflow:hidden;background:var(--c-white)}
.safy-qty button{display:grid;place-items:center;width:30px;padding:0;border:0;border-radius:0;background:var(--c-bg-soft);color:var(--c-ink);font-size:18px;line-height:1;cursor:pointer}
.safy-qty button:hover{background:var(--c-tint-pink);color:var(--c-primary)}
.safy-qty input{width:40px;min-width:0;padding:0;border:0;border-radius:0;background:transparent;text-align:center;font:inherit;font-size:15px;font-weight:700;color:var(--c-ink);-moz-appearance:textfield;appearance:textfield}
.safy-qty input::-webkit-outer-spin-button,.safy-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.safy-qty input:focus{outline:0;background:var(--c-tint-pink)}
.safy-cart .quantity{display:inline-flex;align-items:stretch;flex:none;border:1px solid var(--c-line);border-radius:8px;overflow:hidden;background:var(--c-white)}
.safy-cart .quantity .safy-qty-btn{display:grid;place-items:center;width:30px;padding:0;border:0;border-radius:0;background:var(--c-bg-soft);color:var(--c-ink);font:inherit;font-size:18px;line-height:1;cursor:pointer}
.safy-cart .quantity .safy-qty-btn:hover{background:var(--c-tint-pink);color:var(--c-primary)}
.safy-cart .quantity input.qty{min-width:0;min-height:0;height:auto;border-radius:0;font:inherit;font-size:15px;font-weight:700;color:var(--c-ink);-moz-appearance:textfield;appearance:textfield}
.safy-cart .quantity input.qty::-webkit-outer-spin-button,.safy-cart .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ===== the chosen options of a product (cart page lines + side cart): the label on its own row, the values in a soft grey box that hugs them ===== */
.safy-cart table.shop_table.cart td.product-name dl.variation,.elementor-menu-cart__products .elementor-menu-cart__product-name>.variation{display:block!important;font-size:13px;line-height:1.6}
.safy-cart table.shop_table.cart td.product-name dl.variation{margin:8px 0 0!important}
.elementor-menu-cart__products .elementor-menu-cart__product-name>.variation{margin:0!important}
.safy-cart table.shop_table.cart td.product-name dl.variation dt,.elementor-menu-cart__products .elementor-menu-cart__product-name>.variation dt{display:block!important;float:none!important;clear:both!important;width:100%;text-align:start;margin:0 0 4px!important;padding:0!important;border:0!important;font-size:13px;font-weight:700!important;color:var(--c-ink)!important}
.safy-cart table.shop_table.cart td.product-name dl.variation dd,.elementor-menu-cart__products .elementor-menu-cart__product-name>.variation dd{display:block!important;float:none!important;clear:both!important;box-sizing:border-box;text-align:start;width:fit-content!important;max-width:100%!important;margin:0 0 8px!important;padding:10px 16px!important;border-radius:12px;background:#F3F3F5;font-size:14px;line-height:1.7;color:var(--c-ink)}
.elementor-menu-cart__products .elementor-menu-cart__product-name>.variation dd{font-size:13px}
.safy-cart table.shop_table.cart td.product-name dl.variation dd:last-child,.elementor-menu-cart__products .elementor-menu-cart__product-name>.variation dd:last-child{margin-bottom:0!important}
.safy-cart table.shop_table.cart td.product-name dl.variation dd p,.elementor-menu-cart__products .elementor-menu-cart__product-name>.variation dd p{display:block!important;margin:0!important}
.elementor-menu-cart__products .elementor-menu-cart__product-name>.variation dd p{display:inline!important}

/* ===== delivery sentence box (cart summary, product page, policy tab): text from the options page "site" ===== */
.safy-delivery{display:flex;align-items:center;gap:8px;box-sizing:border-box!important;max-width:100%;margin-top:14px;padding:10px 12px;border-radius:var(--radius-s);background:linear-gradient(to right,var(--c-tint-purple),var(--c-tint-pink));font-size:13px!important;line-height:1.6;color:var(--c-ink);white-space:nowrap}
.safy-delivery__icon,.safy-delivery__ico{flex:none;width:18px;height:18px;background:var(--c-primary);-webkit-mask:var(--ico-truck) center/contain no-repeat;mask:var(--ico-truck) center/contain no-repeat}
.safy-delivery__text{display:block}
@media(max-width:767px){.safy-delivery{white-space:normal}}

/* ===== compact page hero + body frame + glow divider (cart and checkout pages) ===== */
.elementor-element.safy-page-hero.safy-cart-hero, .elementor-element.safy-page-hero.safy-compact-hero { height: 150px !important; min-height: 150px !important; max-height: 150px !important; }
.elementor-element.safy-page-hero__body.safy-cart-hero__body, .elementor-element.safy-page-hero__body.safy-compact-hero__body { height: 100%; min-height: 0; box-sizing: border-box; }
.elementor-element.safy-cart-body, .elementor-element.safy-compact-body { padding: 32px max(24px, calc((100% - 1200px) / 2)) 48px; }

/* glow divider under the title (prototype .gdiv) */
.safy-cart-divider, .safy-compact-divider { position: relative; display: block; width: 220px; height: 14px; margin: 8px auto 0; }
.safy-cart-divider .elementor-widget-container, .safy-compact-divider .elementor-widget-container { display: none; }
.safy-cart-divider::before, .safy-compact-divider::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, var(--c-purple) 28%, var(--c-primary) 72%, transparent); opacity: .7; }
.safy-cart-divider::after, .safy-compact-divider::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--grad-brand); transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(227, 35, 104, .16), 0 0 0 9px rgba(126, 34, 161, .08), 0 0 14px 2px rgba(227, 35, 104, .5); }
@media(max-width:767px){.elementor-element.safy-cart-body,.elementor-element.safy-compact-body{padding:16px 16px 32px}}

/* product cards (shop, categories, related): stars only, never the rating number or the count */
li.product .ocms-stars__num, li.product .ocms-wcb-rating__count, li.product .ocms-wcb-rating > span:not(.star-rating) { display: none !important; }
/* stars only everywhere (sidebar widgets, product page, cards): never the rating number or the count */
.ocms-stars__num, .ocms-wcb-rating__count { display: none !important; }

/* product cards: everything in the card is centred, the stars included (they are a fixed-width block, so auto margins centre them) */
li.product .ocms-wcb-rating { display: flex !important; justify-content: center; align-items: center; width: 100%; }
li.product .star-rating, li.product .ocms-wcb-rating .star-rating { display: block !important; margin-inline: auto !important; float: none !important; }
li.product .woocommerce-LoopProduct-link { text-align: center; }