/*
Theme Name: Kamagra
Theme URI: https://example.com/kamagra
Author: Kamagra
Author URI: https://example.com
Description: A clean, fast, accessibility-minded classic WordPress theme with first-class WooCommerce support. Fully responsive, translation ready, and designed to be extended piece by piece.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kamagra
Tags: e-commerce, blog, one-column, two-columns, right-sidebar, custom-logo, custom-menu, custom-colors, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	--color-primary: #0e5a8a;
	--color-primary-dark: #0a4370;
	--color-primary-light: #e8f2f9;
	--color-accent: #00aab5;
	--color-accent-dark: #0e5a8a;
	--color-text: #1f2937;
	--color-text-muted: #6b7280;
	--color-heading: #0f172a;
	--color-border: #e5e7eb;
	--color-bg: #ffffff;
	--color-bg-alt: #f8fafc;
	--color-danger: #dc2626;

	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--font-heading: var(--font-body);

	/* Text sizes. */
	--font-size-h1: 40px;
	--font-size-h2: 32px;
	--font-size-h3: 26px;
	--font-size-h4: 20px;
	--font-size-h5: 18px;
	--font-size-h6: 16px;
	--font-size-body: 16px;

	/* Global buttons. */
	--button-bg: #0e5a8a;
	--button-text: #ffffff;
	--button-hover-bg: #0a4370;
	--button-hover-text: #ffffff;
	--button-radius: 6px;

	--line-height: 1.7;
	--line-height-tight: 1.25;

	--container: 1248px;
	--container-narrow: 760px;
	--gutter: 1.5rem;
	--section-space: clamp(2.5rem, 6vw, 5rem);

	--radius-sm: 6px;
	--radius: 10px;
	--radius-lg: 16px;
	--radius-pill: 999px;

	--shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
	--shadow: 0 4px 16px rgba(15, 23, 42, .08);
	--shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);

	--transition: 180ms ease;

	/* Header tokens. Every value below is replaceable from the Customizer;
	   inc/dynamic-css.php prints the overrides. These are the defaults. */
	--kamagra-logo-max-height: 56px;
	--kamagra-logo-max-width: 240px;
	--kamagra-header-bg: #ffffff;
	--kamagra-header-padding: 14px;
	--kamagra-header-border: #e5e7eb;

	--kamagra-icon-size: 22px;
	--kamagra-icon-gap: 14px;
	--kamagra-icon-color: #0f172a;
	--kamagra-icon-hover-bg: #e8f2f9;
	--kamagra-icon-hover-color: #0a4370;
	--kamagra-badge-bg: #16a34a;
	--kamagra-badge-color: #ffffff;

	--kamagra-menu-bg: linear-gradient(90deg, #61a7c0 50%, #5ac6d4 100%);
	--kamagra-menu-text-color: #ffffff;
	--kamagra-menu-active-bg: #55899c;
	--kamagra-menu-gap: 24px;
	--kamagra-menu-padding-y: 20px;
	--kamagra-menu-padding-x: 5px;
	--kamagra-menu-font-size: 15px;
	--kamagra-menu-font-weight: 500;
	--kamagra-mobile-toggle: #ffffff;

	/* Shop buttons. */
	--kamagra-btn-grad-from: #000000;
	--kamagra-btn-grad-to: #509cb6;
	--kamagra-btn-grad-angle: 90deg;
	--kamagra-btn-text: #ffffff;

	/* Slide-out cart. */
	--kamagra-drawer-pad: 1.5rem;

	/* Icon strip under the hero. */
	--kamagra-feature-icon: #00aab5;

	/* Newest-products band. */
	--kamagra-top-products-bg: linear-gradient(90deg, #10262c 0%, #3a9db0 100%);
	--kamagra-top-products-info: #333333;

	/* Post teaser links. */
	--kamagra-posts-link: #1f7d99;

	/* How much of the viewport the sticky header covers, so that a link in the
	   table of contents does not land its heading underneath it. Measured from
	   the shipped header; inc/dynamic-css.php prints 0 when sticky is off. */
	--kamagra-scroll-offset: 141px;
}

/* ==========================================================================
   2. Reset
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchor jumps stop short of the sticky header instead of under it. */
	scroll-padding-top: var(--kamagra-scroll-offset);
}

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--font-size-body, 1rem);
	line-height: var(--line-height);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

img,
svg,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0 0 1.5rem;
}

hr {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: 2rem 0;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .6em;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: var(--line-height-tight);
}

/* The size you set is the size on a full-width screen. H1–H3 are also capped
   at a share of the viewport so long headings stay readable on a phone; the
   cap sits well above the default, so a larger value is never silently
   clipped on desktop. H4–H6 and body text are used exactly as set. */
h1 { font-size: min(var(--font-size-h1, 40px), 8.5vw); }
h2 { font-size: min(var(--font-size-h2, 32px), 7vw); }
h3 { font-size: min(var(--font-size-h3, 26px), 5.8vw); }
h4 { font-size: var(--font-size-h4, 20px); }
h5 { font-size: var(--font-size-h5, 18px); }
h6 { font-size: var(--font-size-h6, 16px); }

p {
	margin: 0 0 1.25rem;
}

/* No underlines anywhere, in any state — a colour change carries the hover.
   The !important is deliberate: without it a plugin stylesheet loaded later
   can put an underline back on its own links. */
a {
	color: var(--color-primary);
	text-decoration: none !important;
	transition: color var(--transition);
}

a:hover,
a:focus {
	color: var(--color-primary-dark);
}

ul, ol {
	margin: 0 0 1.25rem;
	padding-left: 1.4rem;
}

li > ul,
li > ol {
	margin-bottom: 0;
}

blockquote {
	margin: 0 0 1.5rem;
	padding: .5rem 0 .5rem 1.25rem;
	border-left: 3px solid var(--color-primary);
	color: var(--color-text-muted);
	font-style: italic;
}

code, kbd, pre, samp {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: .9em;
}

code {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: .1em .4em;
}

pre {
	background: #0f172a;
	color: #e2e8f0;
	border-radius: var(--radius);
	padding: 1.25rem;
	overflow: auto;
}

pre code {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5rem;
}

th, td {
	border: 1px solid var(--color-border);
	padding: .65rem .85rem;
	text-align: left;
}

th {
	background: var(--color-bg-alt);
	font-weight: 600;
}

/* ==========================================================================
   4. Accessibility
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--color-bg);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
	clip-path: none;
	color: var(--color-primary);
	display: block;
	font-size: .9rem;
	font-weight: 700;
	height: auto;
	left: 1rem;
	line-height: normal;
	padding: .75rem 1rem;
	text-decoration: none;
	top: 1rem;
	width: auto;
	z-index: 100000;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999999;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
	background: var(--color-bg);
	padding: .75rem 1rem;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
}

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* ==========================================================================
   5. Layout
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1 0 auto;
}

.content-area {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	padding-top: 40px;
	padding-bottom: 40px;
}

.content-area.has-sidebar {
	grid-template-columns: minmax(0, 1fr) 320px;
}

/*
 * The blog listing pages use the shop's shape: the sidebar takes a fifth on
 * the left, but the posts column stays first in the markup so a screen reader
 * reaches the posts before the widgets.
 */
.content-area--blog.has-sidebar {
	grid-template-columns: 20% minmax(0, 1fr);
	gap: 24px;
}

.content-area--blog.has-sidebar .site-main {
	grid-column: 2;
	grid-row: 1;
}

.content-area--blog.has-sidebar .widget-area {
	grid-column: 1;
	grid-row: 1;
}

.site-main {
	min-width: 0;
}

.page-template-full-width .content-area,
.page-template-full-width .content-area.has-sidebar {
	grid-template-columns: minmax(0, 1fr);
}

/* ==========================================================================
   6. Header
   ========================================================================== */

.site-header {
	position: relative;
	z-index: 100;
	background: var(--kamagra-header-bg);
}

.site-header--sticky {
	position: sticky;
	top: 0;
}

body.admin-bar .site-header--sticky {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header--sticky {
		top: 0;
	}
}

/* --- Row 1: logo | search | action buttons --- */

.site-header__top {
	padding-block: var(--kamagra-header-padding);
	border-bottom: 1px solid var(--kamagra-header-border);
}

.site-header__top-inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 1.5rem;
	align-items: center;
}

.site-header__branding {
	min-width: 0;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.custom-logo,
.site-branding__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: var(--kamagra-logo-max-width);
	max-height: var(--kamagra-logo-max-height);
}

.site-branding__logo a {
	display: inline-block;
	line-height: 0;
}

.site-title {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.2;
	letter-spacing: -.01em;
}

.site-title a {
	color: var(--color-heading);
	text-decoration: none;
}

.site-description {
	margin: .15rem 0 0;
	color: var(--color-text-muted);
	font-size: .82rem;
	line-height: 1.3;
}

.site-header__search {
	min-width: 0;
}

.site-header__search .search-form {
	gap: 0;
}

.site-header__search .search-field {
	height: 46px;
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
	border-right: 0;
}

.site-header__search .search-submit {
	width: 48px;
	height: 46px;
	padding: 0;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* --- Row 1, column 3: action buttons --- */

.site-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--kamagra-icon-gap);
	min-width: 0;
}

/* The menu-row copy of the actions, and the search button, only exist below
   the tablet breakpoint. The extra specificity beats .header-action's
   display rule regardless of source order. */
.site-header__actions--nav,
.site-header__actions .header-search-toggle {
	display: none;
}

.header-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--kamagra-icon-gap);
}

.header-action {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .4rem;
	background: transparent;
	border: 0;
	border-radius: var(--radius-sm);
	color: var(--kamagra-icon-color);
	font-family: inherit;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition);
}

.header-action:hover,
.header-action:focus {
	background: var(--kamagra-icon-hover-bg);
	color: var(--kamagra-icon-hover-color);
	transform: none;
	box-shadow: none;
}

.header-action__icon {
	display: block;
	flex: 0 0 auto;
	width: var(--kamagra-icon-size);
	height: var(--kamagra-icon-size);
}

.header-action__text {
	font-size: .9rem;
	font-weight: 600;
	white-space: nowrap;
}

.header-action__badge {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 19px;
	height: 19px;
	padding: 0 .3rem;
	background: var(--kamagra-badge-bg);
	color: var(--kamagra-badge-color);
	border-radius: var(--radius-pill);
	font-size: .68rem;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
}

.header-action__badge.is-empty {
	display: none;
}

/* ==========================================================================
   7. Navigation
   ========================================================================== */

.site-header__nav {
	background-image: var(--kamagra-menu-bg);
}

.site-header__nav-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.main-navigation {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	min-width: 0;
}

/* The collapsed menu is the only one shown below the breakpoint. */
.main-navigation--mobile {
	display: none;
}

.main-navigation ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--kamagra-menu-gap);
	row-gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	padding: var(--kamagra-menu-padding-y) var(--kamagra-menu-padding-x);
	color: var(--kamagra-menu-text-color);
	font-size: var(--kamagra-menu-font-size);
	font-weight: var(--kamagra-menu-font-weight);
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition);
	line-height: 1.2em;
}

.main-navigation a::after {
	content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #ffffff;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

.main-navigation a:hover::after,
.main-navigation a:focus::after {
	transform: scaleX(1);
	transform-origin: bottom left;
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_ancestor > a {
/* 	background: var(--kamagra-menu-active-bg); */
}

/* Dropdowns */
.main-navigation ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 200;
	display: block;
	min-width: 220px;
	padding: .4rem;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.main-navigation ul li:hover > ul,
.main-navigation ul li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-navigation ul ul a {
	padding: .55rem .85rem;
	color: var(--color-heading);
	font-size: .95rem;
	border-radius: var(--radius-sm);
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a:focus,
.main-navigation ul ul .current-menu-item > a {
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
}

.main-navigation ul ul li {
	width: 100%;
}

.main-navigation ul ul ul {
	top: 0;
	left: 100%;
}

/* Mobile toggle */
.menu-toggle {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 42px;
	margin-left: auto;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: var(--radius-sm);
	color: var(--kamagra-mobile-toggle);
	cursor: pointer;
}

.menu-toggle:hover,
.menu-toggle:focus {
	background: rgba(255, 255, 255, .18);
	color: var(--kamagra-mobile-toggle);
	transform: none;
	box-shadow: none;
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	transition: transform var(--transition), opacity var(--transition);
}

.menu-toggle__bars {
	position: relative;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.menu-toggle__bars::before { top: -6px; }
.menu-toggle__bars::after  { top: 6px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bars {
	background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* ==========================================================================
   8. Buttons
   ========================================================================== */

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .7rem 1.4rem;
	background: var(--button-bg);
	color: var(--button-text);
	border: 1px solid var(--button-bg);
	border-radius: var(--button-radius);
	font-family: inherit;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.button:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	background: var(--button-hover-bg);
	border-color: var(--button-hover-bg);
	color: var(--button-hover-text);
	transform: translateY(-1px);
	box-shadow: var(--shadow);
}

.button--accent,
.wp-block-button.is-style-accent .wp-block-button__link {
	background: var(--color-accent);
	border-color: var(--color-accent);
}

.button--accent:hover,
.wp-block-button.is-style-accent .wp-block-button__link:hover {
	background: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
}

.button--ghost,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--button-bg);
	border-color: var(--button-bg);
}

.button--ghost:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--button-bg);
	color: var(--button-text);
}

/* ==========================================================================
   9. Forms
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: .7rem .9rem;
	background: var(--color-bg);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: .95rem;
	line-height: 1.4;
	transition: border-color var(--transition), box-shadow var(--transition);
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(14, 90, 138, .15);
}

textarea {
	min-height: 140px;
	resize: vertical;
}

label {
	display: block;
	margin-bottom: .35rem;
	font-size: .9rem;
	font-weight: 600;
	color: var(--color-heading);
}

.search-form {
	display: flex;
	gap: .5rem;
}

.search-form .search-field {
	flex: 1 1 auto;
	min-width: 0;
}

.search-submit {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding-inline: 1rem;
}

.search-submit svg {
	width: 18px;
	height: 18px;
}

/* ==========================================================================
   10. Posts & entries
   ========================================================================== */

.entry {
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.entry:last-child {
	margin-bottom: 0;
}

.entry-header {
	margin-bottom: 1rem;
}

.entry-title {
	margin: 0 0 .4rem;
	letter-spacing: -.015em;
}

.entry-title a {
	color: var(--color-heading);
	text-decoration: none;
}

.entry-title a:hover {
	color: var(--color-primary);
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem .9rem;
	color: var(--color-text-muted);
	font-size: .85rem;
}

.entry-meta a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.entry-meta a:hover {
	color: var(--color-primary);
}

.entry-meta__item::before {
	content: "·";
	margin-right: .9rem;
	color: var(--color-border);
}

.entry-meta__item:first-child::before {
	content: none;
	margin: 0;
}

/* Table of contents on a single post */
.kamagra-toc {
	/* What one heading level adds to the indent. */
	--kamagra-toc-indent: 1.25rem;

	box-sizing: border-box;
	width: 100%;
	margin-bottom: 1.5rem;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-bg);
	box-shadow: var(--shadow-sm);

	/* Lets the panel's closed height be written as auto and still animate. */
	interpolate-size: allow-keywords;
}

/* The panel slides instead of snapping. ::details-content is the anonymous box
   the browser wraps a details' content in; it is collapsed to nothing while
   shut, and the discrete content-visibility transition keeps the content
   painted for the length of the collapse rather than blanking it at once.
   A browser that does not know ::details-content drops these rules and keeps
   the plain instant toggle. */
.kamagra-toc::details-content {
	block-size: 0;
	overflow: hidden;
	transition:
		block-size 260ms ease-out,
		content-visibility 260ms allow-discrete;
}

.kamagra-toc[open]::details-content {
	block-size: auto;
}

/* Flex so the caret below sits at the right edge, and so the default marker
   is dropped in the browsers that still draw one inside the box. */
.kamagra-toc__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid transparent;
	background: var(--color-bg-alt);
	color: var(--color-heading);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	transition:
		color var(--transition),
		background-color var(--transition),
		border-color var(--transition);
}

.kamagra-toc__toggle:hover,
.kamagra-toc__toggle:focus-visible {
	color: var(--color-primary);
}

.kamagra-toc__toggle::-webkit-details-marker {
	display: none;
}

/* The rule that separates the strip from the panel is always there and only
   colours in, so it fades with the slide instead of appearing on the first
   frame of it. */
.kamagra-toc[open] .kamagra-toc__toggle {
	border-bottom-color: var(--color-border);
}

/* Two borders on a rotated square, pointing down when shut and up when open. */
.kamagra-toc__toggle::after {
	content: "";
	flex: none;
	width: .5rem;
	height: .5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--transition);
}

.kamagra-toc[open] .kamagra-toc__toggle::after {
	transform: rotate(225deg);
}

.kamagra-toc__nav {
	padding: .85rem 1.25rem 1rem;
}

.kamagra-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The indent is the outline: one step per heading level below the shallowest
   heading the post uses, so H2 sits flush and H4 sits two steps in. */
.kamagra-toc__item--depth-0 {
	padding-left: 0;
}

.kamagra-toc__item--depth-1 {
	padding-left: var(--kamagra-toc-indent);
}

.kamagra-toc__item--depth-2 {
	padding-left: calc(2 * var(--kamagra-toc-indent));
}

.kamagra-toc__item--depth-3 {
	padding-left: calc(3 * var(--kamagra-toc-indent));
}

.kamagra-toc__item--depth-4 {
	padding-left: calc(4 * var(--kamagra-toc-indent));
}

.kamagra-toc__item--depth-5 {
	padding-left: calc(5 * var(--kamagra-toc-indent));
}

@media screen and (max-width: 600px) {
	.kamagra-toc {
		--kamagra-toc-indent: .9rem;
	}
}

.kamagra-toc__item a {
	display: block;
	padding: .3rem 0;
	color: var(--color-text);
	font-size: .95rem;
}

.kamagra-toc__item a:hover,
.kamagra-toc__item a:focus {
	color: var(--color-primary);
}

.entry-thumbnail {
	margin-bottom: 1.5rem;
	overflow: hidden;
	border-radius: var(--radius);
}

.entry-thumbnail img {
	display: block;
	width: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.entry-thumbnail a:hover img {
	transform: scale(1.03);
}

.entry-content > *:last-child {
	margin-bottom: 0;
}

.entry-footer {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: .85rem;
}

.entry-footer a {
	color: var(--color-text-muted);
}

/* Category / tag pills */
.cat-links a,
.tags-links a {
	display: inline-block;
	padding: .15rem .6rem;
	margin: 0 .2rem .2rem 0;
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
	border-radius: var(--radius-pill);
	font-size: .78rem;
	font-weight: 600;
	text-decoration: none;
}

.cat-links a:hover,
.tags-links a:hover {
	background: var(--color-primary);
	color: #fff;
}

/* Grid of posts on the blog, the archives and search results */
.posts-grid {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2rem);
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

/*
 * The count from the Customizer only applies where there is room for it. The
 * breakpoint matches the header's, and the two narrower counts below match
 * the shop loop, so the whole page changes shape at the same two points.
 */
@media (min-width: 1025px) {
	.posts-grid {
		grid-template-columns: repeat(var(--kamagra-blog-cols, 3), minmax(0, 1fr));
	}
}

.posts-grid .entry-title {
	font-size: 22px;
}

.posts-grid .entry {
	margin-bottom: 0;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: box-shadow var(--transition), transform var(--transition);
}

.posts-grid .entry:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-3px);
}

.posts-grid .entry-thumbnail {
	margin: 0;
	border-radius: 0;
}

.posts-grid .entry-header,
.posts-grid .entry-summary,
.posts-grid .entry-footer {
	padding-inline: 1.25rem;
}

.posts-grid .entry-header {
	padding-top: 1.25rem;
}

.posts-grid .entry-footer {
	padding-bottom: 1.25rem;
	border-top: 0;
	margin-top: 0;
}

.posts-grid .entry-summary {
	padding-bottom: 1.5rem;
}

.posts-grid .entry-summary > *:last-child {
	margin-bottom: 0;
}

.entry-more {
	margin: 1.25rem 0 0;
}

/* ==========================================================================
   11. Pagination
   ========================================================================== */

.pagination,
.woocommerce-pagination {
	margin-top: clamp(2rem, 5vw, 3rem);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 .75rem;
	background: var(--color-bg);
	color: var(--color-heading);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.pagination .page-numbers:hover,
.pagination .page-numbers:focus {
	background: var(--color-primary-light);
	border-color: var(--color-primary);
	color: var(--color-primary-dark);
}

.pagination .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

/* ==========================================================================
   12. Page header / archive heading
   ========================================================================== */

.page-header {
	margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--color-border);
}

.page-header .page-title {
	margin: 0;
}

.page-header .archive-description {
	margin: .75rem 0 0;
	color: var(--color-text-muted);
}

.page-header .archive-description p:last-child {
	margin-bottom: 0;
}

/* The blog archive's description leads the posts, under the heading band. */
.site-main > .archive-description {
	margin: 0 0 clamp(1.5rem, 3vw, 2rem);
	color: var(--color-text-muted);
}

.site-main > .archive-description > *:last-child {
	margin-bottom: 0;
}

/*
 * The blog listing heading band, mirroring the shop's `.shop-heading` in
 * assets/css/woocommerce.css. That file only loads on WooCommerce pages, so
 * the blog needs its own copy here.
 */
.blog-heading {
	padding-block: 10px;
	background-color: var(--color-bg-alt);
	background-image: url(assets/images/shop-heading-bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.blog-heading__crumbs,
.blog-heading__crumbs a {
	color: var(--color-heading);
}

.blog-heading__crumbs {
	margin-bottom: .25rem;
	font-size: .9rem;
}

.blog-heading__crumbs a:hover,
.blog-heading__crumbs a:focus {
	color: var(--color-primary);
}

/* A single post puts the trail under the title, so the gap moves with it. */
.blog-heading__title + .blog-heading__crumbs {
	margin-top: .35rem;
	margin-bottom: 0;
}

.blog-heading__title {
	margin: 0;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.15;
}

@media (max-width: 1024px) {
	.blog-heading__title {
		font-size: 28px;
	}
}

@media (max-width: 600px) {
	.blog-heading__title {
		font-size: 24px;
	}
}

/*
 * A single post and a page set their title a touch smaller than a listing
 * does. Scoped to a min-width query rather than left bare: the body class
 * would otherwise outrank the tablet and phone sizes above on specificity,
 * media query or not.
 */
@media (min-width: 1025px) {
	.single-post .blog-heading__title,
	.page .blog-heading__title {
		font-size: 32px;
	}
}

/* ==========================================================================
   13. Sidebar & widgets
   ========================================================================== */

.widget-area {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.widget {
	font-size: .93rem;
}

.widget-title {
	margin: 0 0 .9rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--color-primary-light);
	font-size: 1.05rem;
}

.widget_tag_cloud a {
	display: inline-block;
	margin: 0 .25rem .35rem 0;
	padding: .2rem .65rem;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	font-size: .8rem !important;
	text-decoration: none;
}

.widget_tag_cloud a:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.widget .wp-block-latest-posts li{
	margin-bottom: 20px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
    padding: 20px;
}

.widget .wp-block-latest-posts li:hover{
	box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.widget .wp-block-latest-posts .wp-block-latest-posts__post-title{
	font-size: 16px;
	font-weight: 700;
}

.widget .wp-block-latest-posts .wp-block-latest-posts__post-excerpt{
	margin-bottom: 0;
}

.single-post .widget-area{
	position: sticky;
    top: 180px;
}

@media screen and (max-width: 790px) {
	.content-area--shop.has-sidebar .site-main,
	.content-area--blog.has-sidebar .site-main{
		order: 2;
	}

	.content-area--shop.has-sidebar .widget-area,
	.content-area--blog.has-sidebar .widget-area{
		order: 1;
	}
}

/* ==========================================================================
   14. Comments
   ========================================================================== */

.comments-area {
	margin-top: clamp(2rem, 5vw, 3rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-border);
}

.comments-title,
.comment-reply-title {
	margin-bottom: 1.5rem;
}

.comment-list {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}

.comment-list ol.children {
	list-style: none;
	margin: .5rem 0 0;
	padding-left: 1.5rem;
}

.comment-body {
	position: relative;
	padding: 1.25rem;
	margin-bottom: 1rem;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.comment-meta {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: .75rem;
}

.comment-author img {
	border-radius: 50%;
}

.comment-author .fn {
	font-weight: 600;
	font-style: normal;
	color: var(--color-heading);
}

.comment-metadata {
	font-size: .8rem;
}

.comment-metadata a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.comment-content > *:last-child {
	margin-bottom: 0;
}

.reply {
	margin-top: .75rem;
}

.comment-reply-link {
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
}

.comment-respond {
	margin-top: 2rem;
}

.comment-form {
	display: grid;
	gap: 1rem;
}

.comment-form p {
	margin: 0;
}

.comment-form label {
	display: block;
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
}

.comment-form-cookies-consent input {
	width: auto;
	margin-top: .3rem;
}

.comment-form-cookies-consent label {
	display: inline;
	margin: 0;
	font-weight: 400;
}

.comment-form .submit {
	justify-self: start;
}

.comment-notes,
.logged-in-as,
.form-allowed-tags {
	color: var(--color-text-muted);
	font-size: .85rem;
}

/* ==========================================================================
   15. Footer
   ========================================================================== */

.site-footer {
	margin-top: auto;
}

/* --- Columns on a light band --- */

.site-footer__top {
	position: relative;
	padding-block: clamp(2.5rem, 5vw, 4rem);
	background: #f0f0f0;
	color: var(--color-text);
}

.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(var(--kamagra-footer-cols, 4), minmax(0, 1fr));
	gap: 2.5rem;
}

.site-footer__top .widget {
	font-size: .95rem;
}

.site-footer__top .widget-title {
	margin: 0 0 1.5rem;
	padding: 0;
	border: 0;
	color: #111;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

.site-footer__top .widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__top .widget li {
	margin: 0 0 .8rem;
	padding: 0;
	border: 0;
}

.site-footer__top .widget a {
	color: #111;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

.site-footer__top .widget a:hover,
.site-footer__top .widget a:focus {
	color: var(--color-primary);
}

/* --- Back to top ---
   Fixed to the viewport rather than to the footer band, and hidden until the
   page has been scrolled: back-to-top.js toggles .is-visible. */

.to-top {
	position: fixed;
	right: 30px;
	bottom: 70px;
	z-index: 999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: #1b8fa8;
	border-radius: 50%;
	color: #fff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity var(--transition), visibility var(--transition), transform var(--transition), background-color var(--transition);
}

.to-top.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

.to-top:hover,
.to-top:focus {
	background: #14748a;
	color: #fff;
	transform: translateY(-2px);
}

@media (max-width: 1024px) {
	.to-top {
		right: 10px;
		bottom: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.to-top {
		transition: none;
	}
}

/* The arrow is two borders on a rotated square, so no icon file is needed. */
.to-top__icon {
	display: block;
	width: 12px;
	height: 12px;
	border-top: 3px solid currentColor;
	border-right: 3px solid currentColor;
	transform: rotate(-45deg) translate(-1px, 1px);
}

/* --- Bottom bar keeps the dark treatment --- */

.site-footer__bottom {
	padding-block: 1.25rem;
	background: #0f172a;
	color: #cbd5e1;
	font-size: .85rem;
}

.site-footer__bottom a {
	color: #e2e8f0;
	text-decoration: none;
}

.site-footer__bottom a:hover {
	color: #fff;
}

/* A link the owner adds to the price note gets the accent colour, so the
   sentence still reads as prose and the link as a link. */
.site-footer__note a {
	color: var(--color-accent);
}

.site-footer__note a:hover,
.site-footer__note a:focus {
	color: #fff;
}

.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 2rem;
	align-items: center;
	justify-content: space-between;
}

.site-info,
.site-footer__note {
	margin: 0;
}

.site-footer__note {
	text-align: right;
}

.footer-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.newsletter-form form.wpforms-form {
	display: flex;
	align-items: center;
}

.newsletter-form .wpforms-form div.wpforms-submit-container {
	margin-top: 0 !important;
}

.newsletter-form .wpforms-form button.wpforms-submit {
	padding: 8px;
}

.newsletter-form .wpforms-form button.wpforms-submit {
	min-width: 75px;
}

div.newsletter-form {
	margin-top: 0;
}

@media (max-width: 1024px) {
	.site-footer__columns {
		--kamagra-footer-cols: 2;
	}

	/* The bottom bar stacks and centres from tablet down. */
	.site-footer__bottom-inner {
		justify-content: center;
		text-align: center;
	}

	.site-footer__note {
		text-align: center;
	}
}

@media (max-width: 600px) {
	.site-footer__columns {
		--kamagra-footer-cols: 1;
	}
}

/* ==========================================================================
   16. 404 & misc
   ========================================================================== */

.error-404 {
	text-align: center;
	max-width: var(--container-narrow);
	margin-inline: auto;
}

.error-404 .error-code {
	font-size: clamp(4rem, 14vw, 8rem);
	font-weight: 800;
	line-height: 1;
	color: var(--color-primary-light);
	margin-bottom: .5rem;
}

.error-404 .search-form {
	max-width: 460px;
	margin: 1.5rem auto 0;
}

.alignleft {
	float: left;
	margin: .35rem 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: .35rem 0 1rem 1.5rem;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignwide {
	margin-inline: calc(-1 * var(--gutter));
	max-width: calc(100% + 2 * var(--gutter));
	width: auto;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.wp-element-caption,
figcaption {
	color: var(--color-text-muted);
	font-size: .82rem;
	text-align: center;
	margin-top: .5rem;
}

.sticky .entry-title::after {
	content: "★";
	margin-left: .4rem;
	color: var(--color-accent);
}

/* ==========================================================================
   16b. Front page hero
   ========================================================================== */

.hero {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	color: #fff;
	padding-block: clamp(3rem, 8vw, 6rem);
	text-align: center;
}

.hero__inner {
	max-width: 760px;
	margin-inline: auto;
}

.hero__title {
	color: #fff;
	margin-bottom: .5rem;
}

.hero__text {
	margin: 0;
	font-size: clamp(1rem, 2vw, 1.15rem);
	color: rgba(255, 255, 255, .88);
}

/* ==========================================================================
   16c. Slide-out cart
   ========================================================================== */

.cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	visibility: hidden;
	pointer-events: none;
}

.cart-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.cart-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, .5);
	opacity: 0;
	transition: opacity 250ms ease;
}

.cart-drawer.is-open .cart-drawer__overlay {
	opacity: 1;
}

.cart-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(420px, 100%);
	background: var(--color-bg);
	box-shadow: -12px 0 40px rgba(15, 23, 42, .2);
	transform: translateX(100%);
	transition: transform 280ms ease;
}

.cart-drawer.is-open .cart-drawer__panel {
	transform: translateX(0);
}

.cart-drawer__header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem var(--kamagra-drawer-pad);
	border-bottom: 1px solid var(--color-border);
}

.cart-drawer__title {
	margin: 0;
	font-size: 1.15rem;
}

.cart-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-heading);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.cart-drawer__close:hover,
.cart-drawer__close:focus {
	background: var(--color-bg-alt);
	border-color: var(--color-primary);
	color: var(--color-primary);
	transform: none;
	box-shadow: none;
}

.cart-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 1.25rem var(--kamagra-drawer-pad);
}

/* Third part: stays put while the item list scrolls. */
.cart-drawer__footer {
	flex: 0 0 auto;
	padding: 1rem var(--kamagra-drawer-pad) 1.25rem;
	border-top: 1px solid var(--color-border);
	background: var(--color-bg-alt);
}

.cart-drawer__footer.is-empty {
	display: none;
}

body.cart-drawer-open {
	overflow: hidden;
}

/* Mini cart inside the drawer.
   Scoped under the drawer's id so these win over WooCommerce's own
   .woocommerce ul.cart_list rules, which would otherwise tie on specificity
   and take precedence from source order. */
#cart-drawer ul.woocommerce-mini-cart {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Each item is a small grid: thumbnail, name, and the line total. */
#cart-drawer ul.woocommerce-mini-cart li {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	grid-template-areas:
		"thumb name   remove"
		"thumb amount total";
	column-gap: .85rem;
	row-gap: .2rem;
	align-items: start;
	padding: .9rem 0;
	border-bottom: 1px solid var(--color-border);
}

#cart-drawer ul.woocommerce-mini-cart li:first-child {
	padding-top: 0;
}

#cart-drawer .cart-drawer__thumb {
	grid-area: thumb;
	display: block;
	line-height: 0;
}

#cart-drawer .cart-drawer__thumb img {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-sm);
	object-fit: cover;
}

#cart-drawer .cart-drawer__name {
	grid-area: name;
	min-width: 0;
	align-self: center;
}

#cart-drawer .cart-drawer__name a {
	color: var(--color-heading);
	font-weight: 600;
	text-decoration: none;
}

#cart-drawer .cart-drawer__name a:hover {
	color: var(--color-primary);
}

#cart-drawer ul.woocommerce-mini-cart li .quantity {
	grid-area: amount;
	display: block;
	color: var(--color-text-muted);
	font-size: .85rem;
	font-weight: 400;
}

#cart-drawer .cart-drawer__total {
	grid-area: total;
	align-self: center;
	justify-self: end;
	color: var(--color-heading);
	font-weight: 700;
	white-space: nowrap;
}

#cart-drawer ul.woocommerce-mini-cart li a.remove {
	grid-area: remove;
	align-self: start;
	justify-self: end;
	position: relative;
	display: block;
	width: 22px;
	height: 22px;
	background: var(--color-bg-alt);
	border-radius: 50%;
	color: var(--color-danger) !important;
	font-size: 1rem;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
}

#cart-drawer ul.woocommerce-mini-cart li a.remove:hover {
	background: var(--color-danger);
	color: #fff !important;
}

/* A removal in flight: the item dims and the × becomes a ring. The link stays
   in place so nothing below it moves while the fragments are fetched. */
#cart-drawer ul.woocommerce-mini-cart li.is-removing {
	opacity: .55;
}

#cart-drawer ul.woocommerce-mini-cart li.is-removing a.remove {
	pointer-events: none;
	color: transparent !important;
}

#cart-drawer ul.woocommerce-mini-cart li.is-removing a.remove::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border: 2px solid var(--color-danger);
	border-right-color: transparent;
	border-radius: 50%;
	animation: kamagra-spin .7s linear infinite;
}

#cart-drawer .variation,
#cart-drawer .product-quantity {
	display: block;
	margin-top: .2rem;
	color: var(--color-text-muted);
	font-size: .85rem;
	font-weight: 400;
}

#cart-drawer .woocommerce-mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	color: var(--color-heading);
	font-size: 1.05rem;
	font-weight: 700;
}

/* Both buttons on one row on desktop, stacked from tablet down. */
#cart-drawer .woocommerce-mini-cart__buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .6rem;
	margin: .9rem 0 0;
	padding: 0;
}

@media (max-width: 1024px) {
	#cart-drawer .woocommerce-mini-cart__buttons {
		grid-template-columns: minmax(0, 1fr);
	}
}

#cart-drawer .woocommerce-mini-cart__buttons a {
	display: block;
	width: 100%;
	padding: .75rem 1.25rem;
	background: var(--color-primary);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-sm);
	color: #fff;
	font-size: .95rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

#cart-drawer .woocommerce-mini-cart__buttons a:hover,
#cart-drawer .woocommerce-mini-cart__buttons a:focus {
	background: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: #fff;
}

#cart-drawer .woocommerce-mini-cart__buttons a.checkout {
	background: var(--color-accent);
	border-color: var(--color-accent);
}

#cart-drawer .woocommerce-mini-cart__buttons a.checkout:hover,
#cart-drawer .woocommerce-mini-cart__buttons a.checkout:focus {
	background: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	color: #fff;
}

#cart-drawer .woocommerce-mini-cart__empty-message {
	margin: 0;
	padding: 2rem 0;
	color: var(--color-text-muted);
	text-align: center;
}

/* ==========================================================================
   16d. Front page hero banner
   ========================================================================== */

.hero-banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--hero-height, 739px);
	padding-block: clamp(3rem, 7vw, 5rem);
	background-color: #0f172a;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: var(--hero-position, center center);
	/* The image holds still while the page scrolls over it. */
	background-attachment: fixed;
	color: #fff;
}

.hero-banner__overlay {
	position: absolute;
	inset: 0;
	background: var(--hero-overlay, #7a8184);
	pointer-events: none;
}

/* The content sits where the image leaves room for it — to the right — but
   the text inside reads left-aligned like any other block. */
.hero-banner__inner {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: flex-end;
	width: 100%;
	text-align: left;
}

.hero-banner__content {
	width: 100%;
	max-width: 660px;
}

/* Sized for the banner rather than following the site's heading scale, so
   it stays legible over the photograph at every width. */
.hero-banner__title {
	margin: 0 0 .6rem;
	color: #fff;
	font-size: calc(20px + 1.8vw);
	text-shadow: 0 .5rem 1rem rgba(0, 0, 0, .35);
}

.hero-banner__subtitle {
	margin: 0 0 1.75rem;
	color: rgba(255, 255, 255, .92);
	font-size: 20px;
}

.hero-banner__actions {
	margin: 0;
}

/* Deliberately does not carry the .button class: on a WooCommerce page the
   theme's .woocommerce a.button rule would outrank it and win back the
   padding. Everything it needs is set here instead. Takes the shop button
   gradient, so the two stay in step. */
.hero-banner__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .85rem 1.9rem;
	background-color: transparent;
	background-image: linear-gradient(
		var(--kamagra-btn-grad-angle, 90deg),
		var(--kamagra-btn-grad-from, #000000) 0%,
		var(--kamagra-btn-grad-to, #509cb6) 100%
	);
	border: 0;
	border-radius: var(--button-radius, 6px);
	color: var(--kamagra-btn-text, #ffffff);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: filter var(--transition), transform var(--transition);
}

.hero-banner__button:hover,
.hero-banner__button:focus {
	color: var(--kamagra-btn-text, #ffffff);
	filter: brightness(1.12);
	transform: translateY(-1px);
}

.hero-page-content {
	padding-top: var(--section-space);
}

@media (max-width: 1024px) {
	.hero-banner {
		/* A fixed background costs a lot on touch devices and iOS Safari does
		   not repaint it at all, so the parallax stays desktop only. */
		background-position: 30% 50% !important;
		min-height: min(550px, var(--hero-height, 739px));
	}

	.hero-banner__content {
		max-width: none;
	}
}

/* ==========================================================================
   16e. Feature strip
   ========================================================================== */

.feature-strip {
	padding-block: clamp(2rem, 4vw, 3rem);
	background: #ededed;
	border-bottom: 1px solid var(--color-border);
}

.feature-strip__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.feature-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

/* The icon file supplies the shape as a mask and the element's own background
   supplies the colour, so an SVG of any colour takes the strip's tint. */
.feature-item__icon {
	display: block;
	width: 64px;
	height: 64px;
	background-color: var(--kamagra-feature-icon, #00aab5);
	-webkit-mask-image: var(--feature-icon);
	mask-image: var(--feature-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.feature-item__text {
	color: var(--color-heading);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
}

@media (max-width: 1024px) {
	.feature-strip__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.feature-strip__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   16f. Category list
   The .category-nav__* classes are emitted only by the category list
   shortcode, so nothing here reaches the shop's own widgets or pages.
   ========================================================================== */

.category-nav {
	background: #fff;
}

/* The title takes the site's menu gradient, so it follows the Menu Bar
   settings in the Customizer rather than duplicating those colours here. */
.category-nav__title {
	margin: 0;
	padding: 15px;
	background-image: var(--kamagra-menu-bg, linear-gradient(90deg, #61a7c0 50%, #5ac6d4 100%));
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.category-nav__list,
.category-nav__submenu,
.category-nav__products {
	margin: 0;
	padding: 0;
	list-style: none;
}

.category-nav__list {
	margin-top: 10px;
}

.category-nav__row {
	display: flex;
	align-items: center;
	gap: .5rem;
}

/* A category reads as a heading, so it carries no rule under it. The
   !important is load bearing: the shortcode renders inside .entry-content,
   whose own link rule (.entry-content a) is one element more specific than
   this one and would otherwise underline it. */
.category-nav__link {
	display: inline-flex;
	flex: 1 1 auto;
	align-items: center;
	gap: .6rem;
	min-width: 0;
	padding: 10px 0;
	color: #000;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none !important;
	text-transform: uppercase;
}

.category-nav__link:hover,
.category-nav__link:focus {
	color: #10689f;
}

.category-nav__thumb {
	flex: 0 0 auto;
	width: 35px;
	height: 35px;
	object-fit: contain;
}

.category-nav__toggle {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition);
}

.category-nav__toggle:hover,
.category-nav__toggle:focus {
	background: var(--color-bg-alt);
	color: var(--color-heading);
}

/* Drawn as a mask so it takes the button's colour, like the icons above. */
.category-nav__chevron {
	display: block;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask-image: url("assets/images/angle-small-down.svg");
	mask-image: url("assets/images/angle-small-down.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform var(--transition);
}

.category-nav__item.is-open > .category-nav__row .category-nav__chevron {
	transform: rotate(180deg);
}

.category-nav__submenu {
	padding-left: 25px;
}

.category-nav__submenu .category-nav__link {
	font-size: 14px;
}

/* Products: bullets in the brand teal, a hairline under each. */
.category-nav__products {
	margin: 0 0 1.25rem;
	padding-left: 25px;
	list-style: disc;
}

.category-nav__products li {
	padding: 10px 0;
	border-bottom: 1px solid #ededed;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3em;
}

.category-nav__products li::marker {
	color: #00aab5;
}

.category-nav__products a {
	display: inline-flex;
	justify-content: space-between;
	width: 100%;
	color: #000;
	text-decoration: none;
}

.category-nav__products a:hover,
.category-nav__products a:focus {
	color: #10689f;
}

/* Below the desktop breakpoint the product lists start closed and the
   chevrons are the way in; above it everything is open and they go away.
   Doing this in CSS means no script has to react to a resize. */
@media (min-width: 991px) {
	.category-nav__toggle {
		display: none;
	}
}

@media (max-width: 990px) {
	.category-nav__products {
		display: none;
	}

	.category-nav__item.is-open > .category-nav__products {
		display: block;
	}
}

/* ==========================================================================
   16g. Newest products
   A full width band under the front page blocks.
   ========================================================================== */

.top-products {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	background-image: var(--kamagra-top-products-bg, linear-gradient(90deg, #10262c 0%, #3a9db0 100%));
	color: #fff;
}

/* Full width rather than a centred container, with its own 20px inset. */
.top-products__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: clamp(1.5rem, 1.5vw, 4rem);
	align-items: center;
	width: 100%;
	padding: 20px;
}

.top-products__title {
	margin: 0;
	padding: 10px 20px;
	color: #fff;
	font-size: 42px;
	font-weight: 800;
	line-height: 1.15;
}

.top-products__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.top-product {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--radius-sm);
	overflow: hidden;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
}

/* A fixed height with object-fit: contain keeps every product's image the
   same height whatever shape the photograph is, rather than cropping it. */
.top-product__media {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	height: 260px;
	padding: 1.25rem;
	background: #fff;
}

.top-product__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.top-product__link img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Overlays the top left of the image rather than sitting beside it. YITH's
   label is collapsed with font-size: 0 so only its icon shows, which keeps
   the heart small however the plugin is configured. */
.top-product__wishlist {
	position: absolute;
	top: .5rem;
	left: .5rem;
	z-index: 2;
}

.top-product__wishlist .yith-wcwl-add-to-wishlist {
	margin: 0;
}

.top-product__wishlist a,
.top-product__wishlist .add_to_wishlist {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	color: var(--color-heading);
	font-size: 0;
	line-height: 0;
	text-decoration: none !important;
}

.top-product__wishlist a:hover,
.top-product__wishlist a:focus {
	color: var(--color-primary);
}

.top-product__wishlist svg,
.top-product__wishlist img,
.top-product__wishlist i {
	width: 22px;
	height: 22px;
	font-size: 22px;
	line-height: 1;
}

.top-product__info {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding: 1rem 1.25rem 1.25rem;
	background: var(--kamagra-top-products-info, #333333);
	color: #fff;
	text-align: center;
	text-decoration: none;
}

.top-product__info:hover,
.top-product__info:focus {
	color: #fff;
}

.top-product__name,
.top-product__price {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
}

.top-product__price .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
}

.top-product__price del {
	opacity: .55;
}

.top-product__price ins {
	text-decoration: none;
}

@media (max-width: 1024px) {
	.top-products__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.top-products__title {
		font-size: 30px;
	}
}

@media (max-width: 600px) {
	.top-products__title {
		font-size: 28px;
		text-align: center;
	}

	.top-products__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.top-product__media {
		height: 220px;
	}
}

/* ==========================================================================
   16h. Latest posts
   ========================================================================== */

.latest-posts {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	background: var(--color-bg-alt);
}

.latest-posts__title {
	margin: 0 0 2rem;
	color: var(--color-heading);
	font-size: 20px;
	font-weight: 700;
	text-align: center;
}

.latest-posts__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-teaser {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
}

/* Cropped to fill rather than contained: these are photographs, not products. */
.post-teaser__media {
	display: block;
	height: 240px;
	line-height: 0;
}

.post-teaser__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-teaser__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: .85rem;
	padding: 1.5rem 1.75rem 1.75rem;
}

.post-teaser__title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.35;
}

.post-teaser__title a {
	color: var(--kamagra-posts-link, #1f7d99);
	font-weight: 700;
	text-decoration: none;
}

/* Beats the base a:hover on specificity, so the colour change has to be
   restated here now that the underline is gone. */
.post-teaser__title a:hover,
.post-teaser__title a:focus {
	color: var(--color-primary-dark);
}

.post-teaser__excerpt {
	color: var(--color-text);
	font-size: .9rem;
	line-height: 1.6;
}

.post-teaser__excerpt p {
	margin: 0;
}

/* Pinned to the bottom so the links line up across cards of different lengths. */
.post-teaser__more {
	margin-top: auto;
	color: var(--kamagra-posts-link, #1f7d99);
	font-size: .9rem;
	font-weight: 700;
	text-decoration: none;
}

.post-teaser__more:hover,
.post-teaser__more:focus {
	color: var(--color-primary-dark);
}

@media (max-width: 1024px) {
	.latest-posts__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.latest-posts__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.post-teaser__media {
		height: 200px;
	}
}

/* ==========================================================================
   17. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.content-area.has-sidebar {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The blog sidebar drops below the posts, which stay first in the DOM. */
	.content-area--blog.has-sidebar .site-main,
	.content-area--blog.has-sidebar .widget-area {
		grid-column: 1;
		grid-row: auto;
	}

	/* Two post cards, whatever the Customizer says. */
	.posts-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Row one holds the logo alone. */
	.site-header__top-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}

	.site-header__actions--top {
		display: none;
	}

	/* Row two: menu button left, icon actions right, menu below. */
	.site-header__nav-inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"toggle  actions"
			"menu    menu";
		align-items: center;
		/* Column gap only. The menu row is empty while collapsed, and a row gap
		   would reserve space under it and push the buttons off centre. */
		gap: 0 .75rem;
		padding-block: .5rem;
	}

	.menu-toggle {
		display: inline-flex;
		grid-area: toggle;
		margin-left: 0;
	}

	.site-header__actions--nav {
		display: flex;
		grid-area: actions;
	}

	.site-header__actions .header-search-toggle {
		display: inline-flex;
	}

	/* Wishlist and the language switch stay on desktop. The tablet and mobile
	   bar keeps search, cart and account. */
	.site-header__actions--nav .header-action--language,
	.site-header__actions--nav .header-action--wishlist {
		display: none;
	}

	.main-navigation--desktop {
		display: none;
	}

	.main-navigation--mobile {
		display: flex;
		grid-area: menu;
	}

	.main-navigation ul {
		display: none;
		flex: 1 1 100%;
		flex-direction: column;
		align-items: stretch;
		column-gap: 0;
		width: 100%;
		padding: .25rem 0 .5rem;
	}

	.main-navigation.toggled > ul {
		display: flex;
	}

	.main-navigation a {
		padding: .8rem var(--kamagra-menu-padding-x);
		border-bottom: 1px solid rgba(255, 255, 255, .18);
	}

	/* A submenu is a row of its own: link and toggle share one line, the list
	   wraps under them. It stays collapsed until its own toggle is pressed. */
	.main-navigation li.menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}

	.main-navigation li.menu-item-has-children > a {
		flex: 1 1 auto;
	}

	.main-navigation ul ul {
		position: static;
		display: none;
		min-width: 0;
		padding: 0 0 0 1rem;
		background: transparent;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.main-navigation li.is-open > ul {
		display: flex;
	}

	.main-navigation ul ul a {
		padding: .65rem var(--kamagra-menu-padding-x);
		color: var(--kamagra-menu-text-color);
	}

	.main-navigation ul ul a:hover,
	.main-navigation ul ul a:focus,
	.main-navigation ul ul .current-menu-item > a {
		background: rgba(255, 255, 255, .18);
		color: var(--kamagra-menu-text-color);
	}

	.main-navigation .submenu-toggle {
		display: inline-flex;
		flex: 0 0 48px;
		align-items: center;
		justify-content: center;
		padding: 0;
		background: none;
		border: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .18);
		color: var(--kamagra-menu-text-color);
		font: inherit;
		cursor: pointer;
	}

	.main-navigation .submenu-toggle::before {
		content: "";
		width: 8px;
		height: 8px;
		margin-top: -4px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform var(--transition);
	}

	.main-navigation li.is-open > .submenu-toggle::before {
		margin-top: 4px;
		transform: rotate(-135deg);
	}

	/* The search field leaves the header and becomes a drop-down panel. */
	.site-header__search {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 120;
		display: none;
		padding: 1rem var(--gutter);
		background: var(--kamagra-header-bg);
		border-bottom: 1px solid var(--kamagra-header-border);
		box-shadow: var(--shadow-lg);
	}

	.site-header__search.is-open {
		display: block;
	}
}

@media (max-width: 600px) {
	:root {
		--gutter: 1.15rem;
	}

	.alignleft,
	.alignright {
		float: none;
		margin: 0 0 1rem;
	}

	/* One post card per row on a phone. */
	.posts-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Shared by the drawer's remove ring here and the add-to-cart ring in
   woocommerce.css. Reduced motion stops the rotation but keeps the ring. */
@keyframes kamagra-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	/* The universal rule above cannot name ::details-content without risking
	   the whole selector list being dropped where the pseudo is unknown. */
	.kamagra-toc::details-content {
		transition: none;
	}
}

@media screen and (max-width: 790px) {
    .banner-home-left, .hide-mobile, .hide-mobile img {
        display: none;
    }
}