/* =====================================================================
   GLOBAL (every page) - loaded by wp-content/mu-plugins/anison-shop-extras.php
   ===================================================================== */

/* HOVER IMAGE of every product box on the site (home page best sellers, shop, categories):
   the second image is hidden until the mouse is on the product picture, then fades in over it. */
.item-product .thumbnail-container a{position:relative}
.item-product .thumbnail-container img.image-cover{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;opacity:0!important;transition:opacity .4s ease}
.item-product .thumbnail-container:hover img.image-cover{opacity:1!important}

/* HOME PAGE, hero slider, SECOND slide (title: Anison, healthy tasty and organic / subtitle: with Anison a different experience).
   966f83e is the id of that slide in the Elementor slider. Background picture = Media Library file "123" (Persian digits, %DB%B1%DB%B2%DB%B3.jpg). To change the picture, change the url(). */
.elementor-2088 .elementor-repeater-item-966f83e,
.elementor-2088 .elementor-repeater-item-966f83e .item-content{
  background-image:url('https://www.anisonco.com/wp-content/uploads/2026/10/%DB%B1%DB%B2%DB%B3.jpg')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
/* same slide: the group photo of the products (the picture on the left) is made bigger. 1.5 = 50% bigger; change the number to resize. */
.elementor-2088 .elementor-repeater-item-966f83e .image_1{scale:1.5;transform-origin:left bottom}

/* ABOUT US page (id 1725): same fonts as the rest of the site. The page mixes old Elementor widgets and the new "atomic" ones (e-heading,
   e-paragraph, e-button), which carry their own font. The theme's font settings (Appearance > Customize > Typography) are variables:
   --typography-body for text and buttons, --typography-heading for titles. Icons are left alone. */
body.page-id-1725 .elementor p,
body.page-id-1725 .elementor li,
body.page-id-1725 .elementor a,
body.page-id-1725 .elementor span:not([class*="icon"]):not([class*="fa-"]),
body.page-id-1725 .elementor div.elementor-widget-text-editor,
body.page-id-1725 .elementor [class*="e-paragraph"],
body.page-id-1725 .elementor [class*="e-button"],
body.page-id-1725 .elementor .elementor-button{font-family:var(--typography-body)!important}
body.page-id-1725 .elementor h1,
body.page-id-1725 .elementor h2,
body.page-id-1725 .elementor h3,
body.page-id-1725 .elementor h4,
body.page-id-1725 .elementor h5,
body.page-id-1725 .elementor h6,
body.page-id-1725 .elementor .elementor-heading-title,
body.page-id-1725 .elementor [class*="e-heading"]{font-family:var(--typography-heading)!important}

/* ABOUT US page: the 4 boxes under "Why Anison?" (quality, variety, hygiene standards, smart delivery) rise a little and softly change color on mouse over.
   Elementor's new (atomic) elements get their own class named e-<element id>-<code>; these classes are the ones used here
   (they are in the page data: Elementor editor > the box > Classes). Change translateY(-10px) for more or less movement, #eaf5fc for the hover color. */
body.page-id-1725 .e-container_5fktm5luo-d1b413f,
body.page-id-1725 .e-container_ezr2hwf7b-d572a2f,
body.page-id-1725 .e-container_d66pixf76-d1e74be,
body.page-id-1725 .e-container_lwq4rt364-38115e0{transition:transform .35s ease,background-color .35s ease,box-shadow .35s ease}
body.page-id-1725 .e-container_5fktm5luo-d1b413f:hover,
body.page-id-1725 .e-container_ezr2hwf7b-d572a2f:hover,
body.page-id-1725 .e-container_d66pixf76-d1e74be:hover,
body.page-id-1725 .e-container_lwq4rt364-38115e0:hover{transform:translateY(-10px);background-color:#eaf5fc!important;box-shadow:0 14px 30px rgba(32,56,120,.15)}
/* ABOUT US page: both buttons ("view our products" = e-5bb5012-bcac1b3, "view seafood products" = e-widget_vrknknec7-bba8e8d) turn orange on mouse over */
body.page-id-1725 .e-5bb5012-bcac1b3,
body.page-id-1725 .e-widget_vrknknec7-bba8e8d{transition:background-color .3s ease,border-color .3s ease,color .3s ease}
body.page-id-1725 .e-5bb5012-bcac1b3:hover,
body.page-id-1725 .e-widget_vrknknec7-bba8e8d:hover,
body.page-id-1725 .elementor-element-5bb5012:hover,
body.page-id-1725 .elementor-element-widget_vrknknec7:hover,
body.page-id-1725 .elementor-element-5bb5012 a:hover,
body.page-id-1725 .elementor-element-widget_vrknknec7 a:hover{background-color:#F07920!important;background-image:none!important;border-color:#F07920!important;color:#fff!important}
body.page-id-1725 .e-5bb5012-bcac1b3:hover *,
body.page-id-1725 .e-widget_vrknknec7-bba8e8d:hover *{color:#fff!important}

/* FOOTER 04, orange consultation box: heading a little smaller (it was 27px). Change the numbers to resize. */
.footer-newsletter .icon-newsletter .elementor-widget-heading .elementor-heading-title{font-size:22px!important;line-height:1.6!important}
@media(max-width:767px){.footer-newsletter .icon-newsletter .elementor-widget-heading .elementor-heading-title{font-size:19px!important}}
.footer-newsletter .wpcf7-not-valid-tip{color:#fff;font-size:12px}
.footer-newsletter .wpcf7-response-output{color:#fff;border-color:#fff!important;margin:10px 0 0!important;font-size:13px}

/* ORDER FORM (page /order/, printed by mu-plugins/anison-order-form.php). It sits on the dark blue box of the page:
   white labels, LIGHT BLUE input boxes (#DDF0FC) with BLACK typed text. Change the colors here. */
.anison-order{width:100%}
.anison-order p{margin:0 0 14px}
.anison-order label{display:block;color:#fff;font-weight:500;font-size:15px}
.anison-order .required-star{color:#ffb27a}
.anison-order input[type=text],
.anison-order input[type=tel],
.anison-order input[type=email],
.anison-order textarea{display:block;width:100%;margin-top:6px;padding:12px 16px;border:2px solid transparent;border-radius:10px;background:#DDF0FC!important;color:#000!important;font-size:15px;font-family:inherit;box-sizing:border-box;transition:border-color .2s}
.anison-order input:focus,
.anison-order textarea:focus{outline:none;border-color:#F07920}
.anison-order ::placeholder{color:#5b6b80;opacity:1}
/* product choice: 2 cards per row, each one is a big button that turns orange with a tick when chosen */
.anison-products{margin:0 0 16px}
.anison-products__legend{display:block;color:#fff;font-weight:500;font-size:15px;margin-bottom:10px}
.anison-products__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:480px){.anison-products__grid{grid-template-columns:1fr}}
.anison-product{position:relative;display:block;cursor:pointer;margin:0}
.anison-product input{position:absolute;opacity:0;pointer-events:none}
.anison-product__box{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 14px;border-radius:10px;background:#DDF0FC;color:#000;font-size:14px;font-weight:600;border:2px solid transparent;transition:background .2s,color .2s,border-color .2s}
.anison-product__tick{flex:none;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid #6199CB;position:relative;transition:background .2s,border-color .2s}
.anison-product:hover .anison-product__box{border-color:#F07920}
.anison-product input:checked + .anison-product__box{background:#F07920;color:#fff}
.anison-product input:checked + .anison-product__box .anison-product__tick{background:#fff;border-color:#fff}
.anison-product input:checked + .anison-product__box .anison-product__tick:after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #F07920;border-width:0 3px 3px 0;transform:rotate(45deg)}
.anison-product input:focus-visible + .anison-product__box{outline:2px solid #fff;outline-offset:2px}
.anison-order__submit{display:block;width:100%;padding:14px 24px;border:0;border-radius:30px;background:#F07920;color:#fff;font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:background .2s,transform .2s}
.anison-order__submit:hover{background:#fff;color:#F07920;transform:translateY(-2px)}
.anison-order__msg{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:14px;line-height:1.9}
.anison-order__msg--ok{background:#e6f6ea;color:#1d6b34}
.anison-order__msg--err{background:#fdeaea;color:#a02525}