/*
 Theme Name:   Dorrinew Child
 Theme URI:    https://www.dorri.co.uk/
 Description:  Child theme for the Dorri (dorrinew) theme.
 Author:       Dorri Ltd
 Author URI:   https://www.dorri.co.uk/
 Template:     dorrinew
 Version:      1.0.12
 Text Domain:  dorrinew-child
*/

/* Add custom CSS below */

/*=====================================================================
  1.0.1 - Mobile & tablet
  Loaded after the parent's style.css / responsive.css, so equal
  selectors here win. Breakpoints follow the parent (Bootstrap 5):
  tablet 768-991px, mobile <=767px, small mobile <=575px.
=====================================================================*/

/* Product rating counts, e.g. "(147)", used the browser's serif font. */
.star-reviews {
    font-family: "Poppins", sans-serif;
}

/* Product cards: .card-body had height:100% under the image, which pushed
   "Buy Now" below the card in the home carousels, and as a wrapping row it
   spread spare height between rating/title/price. A column keeps them
   stacked at the top with the button pinned to the bottom. */
.pdct-item .card-body {
    height: auto;
    flex: 1 1 auto;
    flex-direction: column;
    flex-wrap: nowrap;
}

/* Product cards (shop grid, related products, home carousels): rating sits
   under the image, left-aligned, instead of floating over the image. */
.pdct-item .card-body > .star-reviews {
    position: static;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 16px;
    margin: 14px 0 8px;
    line-height: 1;
    text-align: left;
}
.pdct-item .card-body > .star-reviews .star-rating {
    float: none;
    margin: 0;
    left: auto;
    transform: none;
}
.pdct-item .card-body > .star-reviews .st_cnt {
    position: static;
    font-size: 14px;
    line-height: 1;
}

/* Home carousels: the last visible card ended exactly on the clipped edge
   and lost its right border. */
.product-item.owl-carousel .owl-item > .item {
    padding: 0 1px;
}
/* The slides are flex items, so without a width each card shrank to its text (the image is
   absolutely positioned in its square frame and no longer sets a width). */
.product-item.owl-carousel .owl-item > .item,
.product-item.owl-carousel .owl-item .card.pdct-item {
    width: 100%;
}

/* Home page "From Our Blog": equal-height cards, buttons on one line. */
.from-our-blog .post-item {
    height: 100%;
}
.from-our-blog .post-item .card-body,
.from-our-blog .post-header {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.from-our-blog .post-header .btnstyle {
    margin-top: auto !important;
    padding-top: 24px;
}
.from-our-blog .image-holder img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Home page Turkish Delight ratings: stars and "(count)" side by side
   (the count used to sit inside the star font and overlap the stars). */
.trksd-item .woocommerce.star-reviews.trksd-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: none;
}
.trksd-item .trksd-rating .star-rating {
    flex: none;
    width: 5.4em;
    margin: 0;
    left: auto;
    transform: none;
}
.trksd-rating-count {
    font-size: 14px;
    line-height: 1;
}

/* Single product gallery (single.php + assets/js/dorri-product-gallery.js).
   Images of any shape are shown whole inside square frames (object-fit: contain). The
   ".dorri-product-gallery" prefix outranks WooCommerce's ".woocommerce img { height: auto }",
   which LiteSpeed's combined CSS loads after this file and which let tall images overflow. */
.dorri-product-gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dorri-gallery-main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    cursor: zoom-in;
}
.dorri-gallery-main.is-placeholder {
    cursor: default;
}
/* Absolutely positioned, because a percentage height inside an aspect-ratio box falls back to
   the image's own height. !important because the site adds an inline style to images from their
   proportions (e.g. "height:119.88%"), which made tall images overflow the square and be cut off. */
.dorri-product-gallery .dorri-gallery-main img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}
.dorri-gallery-zoom {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    color: #3a6f23;
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
}
.dorri-gallery-thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.dorri-gallery-thumb {
    flex: 0 0 76px;
    height: 76px;
    padding: 4px;
    border: 2px solid #e6eadf;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color .2s ease;
}
.dorri-product-gallery .dorri-gallery-thumb img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

/* Product cards (shop grid, related products, home carousels) and the Cart page: the whole
   product image in a square frame, whatever its shape (uncropped image sizes in the templates). */
.pdct-item .pdct-item-img a {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
}
.pdct-item .pdct-item-img a img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}
.woocommerce-cart table.cart td.product-thumbnail img {
    aspect-ratio: 1 / 1;
    height: auto !important;
    object-fit: contain;
}
.dorri-gallery-thumb:hover,
.dorri-gallery-thumb.is-active {
    border-color: #74a331;
}
.dorri-gallery-thumb:focus-visible {
    outline: 2px solid #3a6f23;
    outline-offset: 2px;
}
@media (min-width: 992px) {
    .dorri-gallery-thumb {
        flex-basis: 88px;
        height: 88px;
    }
}

/* Product page options (Weight …): the label above a full-width drop-down, "Clear" under it.
   16px stops iOS Safari zooming when the drop-down opens. */
form.variations_form table.variations {
    width: 100%;
    max-width: 360px;
    margin: 0 0 20px;
    border: 0;
}
form.variations_form table.variations tr,
form.variations_form table.variations th.label,
form.variations_form table.variations td.value {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
}
form.variations_form table.variations tr + tr {
    margin-top: 16px;
}
form.variations_form table.variations th.label label {
    display: block;
    margin: 0 0 8px;
    color: #282828;
    font-size: 15px;
    font-weight: 600;
}
form.variations_form table.variations select {
    display: block;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 44px 0 16px;
    border: 1px solid #c6c6c6;
    border-radius: 8px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23282828' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
    color: #282828;
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
form.variations_form table.variations select:hover {
    border-color: #8a8a8a;
}
form.variations_form table.variations select:focus-visible {
    outline: 2px solid #3a6f23;
    outline-offset: 2px;
}
form.variations_form .reset_variations {
    display: inline-block;
    margin-top: 8px;
    color: #6b6b6b;
    font-size: 14px;
    text-decoration: underline;
}
form.variations_form .reset_variations:hover {
    color: #3a6f23;
}

/* Contact page */
.contactus-social {
    display: flex;
    gap: 16px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.contactus-social a {
    color: #3a6f23;
}
.contactus-social a:hover {
    color: #74a331;
}

/* Basket and checkout delivery options: the DPD services' accordion under FREE DELIVERY
   (woocommerce/cart/cart-shipping.php), no box around it. */
.dorri-dpd summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #282828;
    font-weight: 500;
    list-style: none;
    cursor: pointer;
}
.dorri-dpd summary::-webkit-details-marker {
    display: none;
}
.dorri-dpd summary::after {
    content: "";
    flex-shrink: 0;
    width: 12px;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23282828' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    transition: transform 0.2s ease;
}
.dorri-dpd[open] summary::after {
    transform: rotate(180deg);
}
.dorri-dpd summary:hover,
.dorri-dpd.is-chosen summary {
    color: #3a6f23;
}
.dorri-dpd summary:focus-visible {
    outline: 2px solid #3a6f23;
    outline-offset: 2px;
}
/* The services sit indented under the "DPD delivery" heading. */
.dorri-dpd .dorri-dpd-options {
    margin: 8px 0 0;
    padding: 0 0 0 20px;
    list-style: none;
}
/* WooCommerce's stacked cart totals table is right-aligned: no indent there. */
@media (max-width: 768px) {
    .woocommerce-cart .dorri-dpd .dorri-dpd-options {
        padding-left: 0;
    }
}
/* Basket "Calculate shipping" form: the parent gives every <section> 100px (60px on mobile)
   top and bottom padding, which left large gaps around the address fields. */
.woocommerce-cart .shipping-calculator-form {
    padding: 0;
}
/* The stacked (mobile) table right-aligns its cells, which ran the chosen country (WooCommerce's
   selectWoo box over the hidden select) under the box's arrow. */
.woocommerce-cart .shipping-calculator-form .select2-selection__rendered {
    text-align: left;
}

/* The quantity saves itself (assets/js/dorri-qty.js adds the class), so "Update cart" has no job left. */
.dorri-basket-autosave .woocommerce-cart-form button[name="update_cart"] {
    display: none !important;
}
/* Desktop basket: the coupon field was 80px wide (WooCommerce's #content rule), cutting off
   "Coupon code". Phones keep WooCommerce's half-width field. */
@media (min-width: 769px) {
    .woocommerce-cart table.cart td.actions .coupon #coupon_code {
        width: 200px !important;
    }
}

/* Basket items on phones: one card per item like the side cart (image, name, price each, stepper,
   line total, bin) instead of WooCommerce's stack of "Product: / Price: / Quantity:" rows.
   WooCommerce's stacked table right-aligns every cell with !important and colours the remove link
   with !important, hence the !important below. */
@media (max-width: 768px) {
    .woocommerce-cart table.cart tr.cart_item {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr) auto;
        grid-template-areas:
            "thumb name remove"
            "thumb price price"
            "thumb qty total";
        align-items: start;
        column-gap: 14px;
        padding: 16px;
        border-bottom: 1px solid #f0f0f0;
        background: #fff;
    }
    .woocommerce-cart table.cart tr.cart_item td {
        display: block;
        padding: 0;
        border: 0;
        background: none;
        text-align: left !important;
    }
    .woocommerce-cart table.cart tr.cart_item td::before {
        content: none;
    }
    .woocommerce-cart table.cart tr.cart_item td.product-thumbnail {
        grid-area: thumb;
        display: block;
        width: 72px;
        height: 72px;
        padding: 4px;
        border: 1px solid #f0f0f0;
        border-radius: 10px;
        background: #fafaf8;
    }
    .woocommerce-cart table.cart tr.cart_item td.product-thumbnail img {
        display: block;
        width: 100%;
        border-radius: 6px;
    }
    .woocommerce-cart table.cart tr.cart_item td.product-name {
        grid-area: name;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.4;
    }
    .woocommerce-cart table.cart tr.cart_item td.product-name a {
        color: #2f2f2f;
        text-decoration: none;
    }
    .woocommerce-cart table.cart tr.cart_item td.product-price {
        grid-area: price;
        margin-top: 4px;
        color: #8a8a8a;
        font-size: 12px;
    }
    .woocommerce-cart table.cart tr.cart_item td.product-price::after {
        content: " each";
    }
    .woocommerce-cart table.cart tr.cart_item td.product-quantity {
        grid-area: qty;
        margin-top: 10px;
    }
    .woocommerce-cart table.cart tr.cart_item td.product-subtotal {
        grid-area: total;
        align-self: center;
        margin-top: 10px;
        color: #2f2f2f;
        font-size: 14px;
        font-weight: 600;
    }
    .woocommerce-cart table.cart tr.cart_item td.product-remove {
        grid-area: remove;
    }
    /* The side cart's bin icon instead of the red cross. */
    .woocommerce-cart table.cart tr.cart_item td.product-remove a.remove {
        width: 30px;
        height: 30px;
        margin: -5px -6px 0 0;
        border-radius: 50%;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3C/svg%3E") no-repeat center;
        color: transparent !important;
        font-size: 0;
    }
    .woocommerce-cart table.cart tr.cart_item td.product-remove a.remove:hover {
        background: #fdeeee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c62828' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3C/svg%3E") no-repeat center;
    }
}

/* Checkout (woocommerce/checkout/form-checkout.php): the shopper's details, then the order summary
   card with the delivery options, payment and "Place order"; side by side from desktop up. */
@media (min-width: 992px) {
    .dorri-checkout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: 48px;
        align-items: start;
    }
    .dorri-checkout-summary {
        position: sticky;
        top: 24px;
    }
}
.dorri-checkout-summary {
    padding: 24px;
    border: 1px solid #e2e4de;
    border-radius: 12px;
    background: #fafaf8;
}
@media (max-width: 991px) {
    .dorri-checkout-summary {
        margin-top: 32px;
        padding: 18px;
    }
}
.woocommerce-checkout form.checkout h3 {
    margin: 0 0 16px;
    font-size: 24px;
}
/* Billing, then delivery address and order notes, one under the other. */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
    float: none;
    width: 100%;
}
.woocommerce-checkout #customer_details .col-2 {
    margin-top: 28px;
}
.woocommerce-checkout #ship-to-different-address label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}
.woocommerce-checkout #ship-to-different-address input {
    width: 18px;
    height: 18px;
    margin: 0;
}

/* Fields: 48px high and rounded like the rest of the shop; 16px stops iOS Safari zooming.
   The parent sets their border with !important. */
.woocommerce-checkout form .form-row {
    margin: 0 0 14px;
    padding: 0;
}
.woocommerce-checkout form .form-row label {
    margin: 0 0 6px;
    color: #2f2f2f;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}
.woocommerce-checkout form .form-row .input-text,
.woocommerce-checkout form .form-row select {
    height: 48px;
    padding: 0 14px;
    border-radius: 8px;
    background-color: #fff;
    color: #2f2f2f;
    font-size: 16px;
}
.woocommerce-checkout form .form-row textarea.input-text {
    height: 110px;
    padding: 12px 14px;
}
.woocommerce-checkout form .form-row .input-text:focus,
.woocommerce-checkout form .form-row select:focus {
    border-color: #3a6f23 !important;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(58, 111, 35, 0.12);
}
/* Country / county boxes (WooCommerce's selectWoo over the hidden select). */
.woocommerce-checkout .select2-container .select2-selection--single {
    display: flex;
    align-items: center;
    height: 48px;
    border: 1px solid #c6c6c6;
    border-radius: 8px;
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0 40px 0 14px;
    color: #2f2f2f;
    font-size: 16px;
    line-height: 46px;
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 10px;
    height: 46px;
}

/* Order summary: plain rows, prices on the right, the total stands out. */
.woocommerce-checkout table.woocommerce-checkout-review-order-table {
    margin: 0 0 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
    padding: 12px 0;
    border: 0;
    border-top: 1px solid #e2e4de;
    background: transparent;
    font-size: 15px;
    vertical-align: top;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
    border-top: 0;
    color: #8a8a8a;
    font-size: 13px;
    font-weight: 500;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td {
    text-align: right;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals td {
    font-weight: 400;
    text-align: left;
}
.woocommerce-checkout .dorri-shipping-label {
    margin: 0 0 8px;
    font-weight: 700;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td {
    border-top: 2px solid #2f2f2f;
    font-size: 18px;
    font-weight: 700;
}

/* Payment: one bordered row per method, its details under it, a full-width "Place order". */
.woocommerce-checkout #payment {
    border-radius: 0;
    background: transparent;
}
.woocommerce-checkout #payment ul.payment_methods {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}
.woocommerce-checkout #payment ul.payment_methods > li {
    margin: 0 0 10px;
    padding: 14px 16px;
    border: 1px solid #e2e4de;
    border-radius: 10px;
    background: #fff;
    list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods > li:has(> input:checked) {
    background: #f6f9f1;
}
.woocommerce-checkout #payment ul.payment_methods > li > label {
    font-weight: 500;
    cursor: pointer;
}
.woocommerce-checkout #payment div.payment_box {
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: #f1f2ee;
    color: #515151;
    font-size: 14px;
}
.woocommerce-checkout #payment div.payment_box::before {
    display: none;
}
.woocommerce-checkout #payment div.form-row.place-order {
    margin: 0;
    padding: 0;
}
.woocommerce-checkout #payment .woocommerce-privacy-policy-text p,
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
    margin: 0 0 14px;
    color: #6b6b6b;
    font-size: 13px;
    line-height: 1.5;
}
.woocommerce-checkout #payment button#place_order {
    display: block;
    float: none;
    width: 100%;
}

/* Product archives (template-parts/dorri-archive-header.php): a shorter banner with breadcrumb and
   title, links to the neighbouring categories, then one toolbar row (result count, sorting).
   The parent fixes the banner image height with !important on tablets and phones. */
.dorri-archive-hero > img {
    display: block;
    width: 100%;
    height: 340px !important;
    object-fit: cover;
    object-position: 70% 50%;
}
/* Darker on the left, where the text sits. */
.dorri-archive-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0) 100%);
}
.dorri-archive-hero .banner-caption {
    z-index: 1;
}
.dorri-archive-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0 0 12px;
    padding: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    list-style: none;
}
.dorri-archive-breadcrumb li + li::before {
    content: "›";
    margin-right: 8px;
    color: rgba(255, 255, 255, 0.6);
}
.dorri-archive-breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}
.dorri-archive-breadcrumb a:hover {
    color: #fff;
    text-decoration: underline;
}
.dorri-archive-breadcrumb [aria-current] {
    color: #fff;
}
.dorri-archive-hero .dorri-archive-title {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15;
    text-align: left;
}
.dorri-archive-intro {
    max-width: 560px;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 17px;
    line-height: 1.5;
}

/* Category links: pills, the current one filled. */
.dorri-archive-cats {
    margin-top: 24px;
}
.dorri-archive-cats ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dorri-archive-cats a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #e2e4de;
    border-radius: 999px;
    background: #fff;
    color: #2f2f2f;
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}
.dorri-archive-cats a:hover {
    background: #f6f9f1;
    color: #3a6f23;
}
.dorri-archive-cats a.is-current {
    border-color: #74a331;
    background: #74a331;
    color: #fff;
}

/* The gap under the banner was the parent's 100px <section> padding. The description is shown in the
   banner instead (or left out when it only repeats the title). */
.all-arhives-dorri.dorri-archive {
    padding: 28px 0 64px;
}
.dorri-archive .term-description {
    display: none;
}

/* Toolbar: result count on the left, sorting on the right, on one row at every width.
   16px stops iOS Safari zooming when the drop-down opens. */
.dorri-archive .woocommerce .woocommerce-result-count {
    float: left;
    width: auto;
    margin: 0 0 24px;
    color: #6b6b6b;
    font-size: 15px;
    line-height: 44px;
    text-align: left;
}
.dorri-archive .woocommerce .woocommerce-ordering {
    float: right;
    width: auto;
    margin: 0 0 24px;
}
.all-arhives-dorri.dorri-archive .woocommerce-ordering select.orderby {
    height: 44px;
    padding: 0 40px 0 14px;
    border: 1px solid #c6c6c6;
    border-radius: 8px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23282828' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    color: #2f2f2f;
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.all-arhives-dorri.dorri-archive .woocommerce-ordering select.orderby:hover {
    border-color: #8a8a8a;
}
/* The product grid (woocommerce/loop/loop-start.php) starts under the toolbar; its Bootstrap mt-5
   (48px, !important) doubled the gap. */
.dorri-archive .dorri-product-list {
    clear: both;
    margin-top: 0 !important;
}

@media (max-width: 1199px) {
    .dorri-archive-hero > img {
        height: 310px !important;
    }
    .dorri-archive-hero .dorri-archive-title {
        font-size: 42px;
    }
}
@media (max-width: 991px) {
    .dorri-archive-hero > img {
        height: 270px !important;
    }
    .dorri-archive-hero .dorri-archive-title {
        font-size: 36px;
    }
}
@media (max-width: 767px) {
    .dorri-archive-hero > img {
        height: 220px !important;
        object-position: 75% 50%;
    }
    .dorri-archive-hero::after {
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.2) 100%);
    }
    .dorri-archive-breadcrumb ol {
        margin-bottom: 8px;
        font-size: 13px;
    }
    .dorri-archive-hero .dorri-archive-title {
        font-size: 30px;
    }
    .dorri-archive-intro {
        font-size: 15px;
    }
    /* Category links in one row that scrolls sideways, fading out at the edge. */
    .dorri-archive-cats {
        margin-top: 18px;
    }
    .dorri-archive-cats ul {
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
        mask-image: linear-gradient(90deg, #000 85%, transparent);
    }
    .dorri-archive-cats ul::-webkit-scrollbar {
        display: none;
    }
    /* The current category first, so it is in view without scrolling. */
    .dorri-archive-cats li:has(> .is-current) {
        order: -1;
    }
    .dorri-archive-cats a {
        padding: 7px 14px;
        font-size: 13px;
    }
    .all-arhives-dorri.dorri-archive {
        padding: 20px 0 48px;
    }
    .dorri-archive .woocommerce .woocommerce-result-count {
        max-width: 46%;
        margin-bottom: 18px;
        font-size: 13px;
        line-height: 1.3;
        padding-top: 13px;
    }
    .dorri-archive .woocommerce .woocommerce-ordering {
        width: 52%;
        margin-bottom: 18px;
    }
    .all-arhives-dorri.dorri-archive .woocommerce-ordering select.orderby {
        width: 100%;
    }
}
@media (max-width: 375px) {
    .dorri-archive-hero > img {
        height: 200px !important;
    }
    .dorri-archive-hero .dorri-archive-title {
        font-size: 26px;
    }
}

/* Touch screens have no hover: show the Turkish Delight "Buy Now" buttons. */
@media (hover: none), (max-width: 991px) {
    .trksd-item .btnstyle,
    .trksd-item .card-body .btnstyle {
        display: block;
        bottom: 0;
    }
}

/*------------------------------ Tablet & mobile ------------------------------*/
@media (max-width: 991px) {
    /* 16px stops iOS Safari zooming the page when a field is focused. */
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px;
    }

    /* Keep the search row clear of the logo on pages without the Trustpilot bar. */
    .header-bar .ssy-basket {
        margin-top: 8px;
    }

    /* Side menu search */
    .sidebar .search-bar {
        max-width: none;
        margin: 0;
    }

    /* Product grid (shop, categories, search, related) */
    .dorri-product-list .pdct-item .card-body {
        padding: 0 14px 18px;
    }
    .dorri-product-list .prdt-title {
        font-size: 15px;
        line-height: 1.45;
    }
    .dorri-product-list .pdct-price {
        font-size: 17px;
        line-height: 1.4;
        margin-bottom: 14px;
    }

    .turkish-delight-box {
        padding: 40px 24px;
    }
    .trksd-price {
        font-size: 17px;
        margin-bottom: 14px;
    }

    .top-footer {
        padding: 70px 0 40px;
    }

    /*------------------------- Side menu (hamburger) -------------------------*/
    .sidebar {
        width: min(86vw, 340px);
        box-shadow: 0 0 30px rgba(0, 0, 0, .18);
    }
    .sidebar .mobile-container .mobile-bar,
    .sidebar .mobile-container .mobile-nav {
        min-height: 0;
        padding: 0;
        background: #fff;
    }
    .sidebar .mobile-container .mobile-bar,
    .sidebar .mobile-container .mobile-bar * {
        box-sizing: border-box;
    }
    .sidebar .mobile-container .mobile-nav {
        border-top: 1px solid #e6eadf;
    }
    .sidebar .mobile-nav #mega-menu-wrap-primary,
    .sidebar .mobile-nav #mega-menu-wrap-primary #mega-menu-primary {
        background: #fff;
    }

    /* Categories */
    .sidebar .mobile-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
        border-bottom: 1px solid #e6eadf;
    }
    .sidebar .mobile-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        float: none;
        width: 100%;
        height: auto;
        min-height: 52px;
        padding: 15px 64px 15px 20px;
        border: 0;
        background: transparent;
        color: #224612;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
        text-transform: none;
    }
    .sidebar .mobile-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link .mega-indicator {
        display: none;
    }

    /* Open/close button: a chevron instead of the dark "+" / "-" box */
    .sidebar .mobile-nav #mega-menu-wrap-primary #mega-menu-primary li > a.mobile-expand {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px !important;
        height: 52px !important;
        margin: 0;
        padding: 0 !important;
        border: 0 !important;
        border-left: 1px solid #e6eadf !important;
        background: transparent;
        color: transparent;
        font-size: 0 !important;
        opacity: 1;
    }
    .sidebar .mobile-nav #mega-menu-wrap-primary #mega-menu-primary li > a.mobile-expand::before {
        content: "";
        width: 9px;
        height: 9px;
        margin-top: -4px;
        border-right: 2px solid #3a6f23;
        border-bottom: 2px solid #3a6f23;
        transform: rotate(45deg);
        transition: transform .2s ease, margin .2s ease;
    }
    .sidebar .mobile-nav #mega-menu-wrap-primary #mega-menu-primary li > a.mobile-expand.mobile-clicked::before {
        margin-top: 4px;
        transform: rotate(-135deg);
    }
    .sidebar .mobile-nav #mega-menu-wrap-primary #mega-menu-primary li > a.mobile-expand:hover {
        background: #f3f7ec;
    }

    /* Sub-groups ("Shop By Type" ...) */
    .sidebar .mobile-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu {
        padding: 0;
        background: #f6f8f2;
        border-top: 1px solid #e6eadf;
    }
    .sidebar .mobile-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item {
        float: none;
        width: 100%;
        padding: 0;
        border-bottom: 1px solid #e6eadf;
    }
    .sidebar .mobile-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item:last-child {
        border-bottom: 0;
    }
    .sidebar .mobile-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
        float: none;
        width: 100%;
        height: auto;
        min-height: 48px;
        margin: 0;
        padding: 14px 64px 14px 28px;
        border: 0;
        background: transparent;
        color: #3a6f23;
        font-size: 13px;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: .04em;
        text-transform: uppercase;
        opacity: 1;
    }
    .sidebar .mobile-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link::before,
    .sidebar .mobile-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link .mega-indicator {
        display: none;
    }
    .sidebar .mobile-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mobile-expand {
        height: 48px !important;
    }

    /* Links */
    .sidebar .mobile-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu {
        padding: 0 0 8px;
        background: #fff;
    }
    .sidebar .mobile-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item {
        float: none;
        width: 100%;
        padding: 0;
    }
    .sidebar .mobile-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
        float: none;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 11px 20px 11px 36px;
        border: 0;
        background: transparent;
        color: #333;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        text-transform: none;
        opacity: 1;
    }
    .sidebar .mobile-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover,
    .sidebar .mobile-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus {
        background: #f3f7ec;
        color: #224612;
    }

    /* Phone: a rounded call button instead of a full-width green block */
    .sidebar .top-phone {
        float: none;
        clear: both;
        padding: 24px 20px 32px;
        background: transparent;
    }
    .sidebar .top-phone .tp-phone-box {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 12px 20px;
        border-radius: 40px;
        background: #3a6f23;
    }
    .sidebar .top-phone .tp-phone-numb a {
        color: #fff;
    }
}

/*---------------------------------- Tablet ----------------------------------*/
@media (min-width: 768px) and (max-width: 991px) {
    /* Three narrow blog columns: smaller type and a 4-line excerpt. */
    .from-our-blog .dflt-header .btnstyle {
        margin-top: 20px !important;
    }
    .from-our-blog .post-item .card-body {
        padding: 18px 2px 0;
    }
    .from-our-blog .post-title {
        margin-bottom: 10px !important;
        font-size: 17px;
        line-height: 1.35;
    }
    .from-our-blog .post-header p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
        margin-bottom: 0;
        font-size: 14px;
        line-height: 1.6;
    }
    .from-our-blog .post-header .btnstyle {
        padding-top: 18px;
    }
    .from-our-blog .post-header .btn_green {
        padding: 8px 16px;
        white-space: nowrap;
    }
}

/*---------------------------------- Mobile ----------------------------------*/
@media (max-width: 767px) {
    /* Footer: "Quick Links" sat directly under the category list. */
    .ftr-clm-cnt {
        margin-bottom: 24px;
    }
    .ftr-clm-cnt h4 {
        margin-bottom: 18px;
    }

    .contact-map iframe {
        height: 320px;
    }

    .turkish-delight-box {
        padding: 30px 12px;
    }
    .trksd-title {
        font-size: 14px;
        line-height: 1.4;
    }
    .trksd-item .card-body {
        padding: 12px 4px;
    }
    .trksd-item .btn_green {
        padding: 8px 18px;
        font-size: 13px;
    }
}

/*------------------------------- Small mobile -------------------------------*/
@media (max-width: 575px) {
    /* Home carousels were centred here; left-align to match the rating. */
    .product-item.owl-carousel .card-body {
        text-align: left;
    }

    /* Two products per row: compact cards so titles and buttons fit. */
    .dorri-product-list .row {
        --bs-gutter-x: 12px;
    }
    .dorri-product-list .pdct-item .card-body {
        padding: 0 10px 14px;
    }
    .dorri-product-list .pdct-item-img {
        padding: 12px 8px 0;
    }
    .dorri-product-list .prdt-title {
        font-size: 14px;
        line-height: 1.4;
    }
    .dorri-product-list .pdct-price {
        font-size: 15px;
        margin-bottom: 12px;
    }
    /* Overrides the parent's "14px 14px !important" button padding. */
    .dorri-product-list .pdct-item .btnstyle .button,
    .dorri-product-list .pdct-item .btnstyle .btn {
        display: block;
        width: 100%;
        padding: 10px 6px !important;
        font-size: 12px !important;
        line-height: 1.3;
        text-align: center;
        white-space: nowrap;
    }
}