:root{--pin-dark:#4B4A4A;--pin-accent:#FF9E02;--pin-black:#000;--pin-white:#fff}

/* Container aligns with WooCommerce single product gallery width. */
.single-product .pin-notice{box-sizing:border-box;margin:12px 0 20px;position:relative;border:1px solid var(--pin-dark);border-left:6px solid var(--pin-accent);background:linear-gradient(0deg,var(--pin-white),var(--pin-white));color:var(--pin-dark);border-radius:8px;padding:12px 14px 14px 14px;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.single-product .pin-notice__title{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--pin-black);font-size:16px;line-height:1.2;margin-bottom:6px}
.single-product .pin-notice__icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--pin-accent);color:var(--pin-black);font-weight:800}
.single-product .pin-notice__text{font-size:14px;line-height:1.55;color:var(--pin-dark)}

/* Respect high-contrast/dark themes a bit */
@media (prefers-color-scheme: dark){
  .single-product .pin-notice{background:#111;color:#ddd;border-color:#2c2c2c}
  .single-product .pin-notice__title{color:#fff}
}

/* Make sure it sits under gallery on common WooCommerce layouts */
.woocommerce div.product .pin-notice{width:500px}
/* Try to keep it inside the left column width on common WC layouts */
.woocommerce div.product div.images .pin-notice{margin-top:12px}
.woocommerce div.product .woocommerce-tabs .pin-notice{margin:16px 0}